<template>
    <div class="add_1">
        <el-row :gutter="-5" class="row_1">
            <el-col :span="6" class="col_1">
                <i class="el-icon-menu"></i>
                <span>添加维护教程</span>
            </el-col>
            <el-button  type="text" class="el-icon-right cancel" @click="cancelAdd">返回</el-button>
        </el-row>

        <el-form :model="tutorialAddForm" :rules="tutorialAddFormRules" ref="tutorialAddFormRef" label-width="100px" class="demo-ruleForm">
            <el-form-item label="标题" prop="title">
                <el-input v-model="tutorialAddForm.title"></el-input>
            </el-form-item>
            <el-form-item label="设备类型" prop="type">
                <el-input v-model="tutorialAddForm.type"></el-input>
            </el-form-item>
            <el-form-item label="封面图片">
                <el-upload
                        class="upload-demo"
                        action="https://prima.cqtrust.cn/problem"
                        list-type="picture-card"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>

            <el-form-item label="上传文件">
                <el-upload
                        class="upload-demo"
                        drag
                        action="https://jsonplaceholder.typicode.com/posts/"
                        multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
            <el-form-item class="btns">
                <el-button type="primary" @click="addTutorialForm">添加</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "tutorial_add_1",
        data(){
            return{
                tutorialAddForm:{
                    title:'',
                    type:'',

                },
                tutorialAddFormRules:{
                    title:[{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    type:[{ required: true, message: '请输入用户名', trigger: 'blur' }],
                },
                type_add:[],
                queryInfoType:{
                    type:'',
                    brand:'',
                    model:'',
                    page:1,
                    limit:10,
                }
            }
        },
        created() {
            this.getType();
        },
        methods:{
            cancelAdd(){
                this.$router.push('/tutorial');
            },
            async getType(){
                const {data:res}=await this.$http.get("type",{params:this.queryInfoType});
                console.log(res);
            },
            addTutorialForm(){
                this.$message.success("我裂开了")
            },
            handlePreview(file){

            },
            handleRemove(file){

            }

        }
    }
</script>

<style lang="less" scoped>
    .row_1 {
        margin-left: 11px;
        /*background: blue;*/
        border-bottom: 2px solid #cccccc;
        /*position: relative;*/
        .col_1 {
            margin: 15px 0 15px 20px;
            span {
                font-size: 15px;
                margin-left: 15px;
            }
            .el-icon-s-custom{
                margin-right: 15px;
                font-size: 25px;
            }
        }
        .cancel{
            position: absolute;
            right: 20px;
            top: 10px;
        }
    }
    .el-form{
        width: 1000px;
        position: absolute;
        top: 130px;
        left: 300px;
        .btns{
            display: flex;
            justify-content: flex-end;
        }
    }
</style>
